<template>
  <van-popup
    class="content"
    v-model="open"
    position="right"
    :style="{ height: '100%', width: '100%' }"
  >
    <head-top routerName="myOrderManagement" title="申请退款"></head-top>
    <div class="content-wrap">
      <goods-content :item="item"></goods-content>
      <div class="total-content">
        <div class="total">
          <div class="label">退款金额：</div>
          <div class="price">
            {{ item.amount | formatFront
            }}<span class="decimal">{{ item.amount | formatAfter }}</span>
            <span class="company">元宝</span>
          </div>
        </div>
        <div class="desc">
          共退款{{ item.amount }}元宝，含{{ item.amount }}元宝交易手续费
        </div>
      </div>
      <div class="desc-cotnent">
        <div class="label">退款说明：</div>
        <van-field
          v-model="formData.desc"
          rows="3"
          autosize
          label=""
          type="textarea"
          maxlength="100"
          placeholder="请填写退款说明并上传凭证"
          show-word-limit
        />
        <van-uploader v-model="descImages" max-count="6" multiple>
          <div class="van-uploader__upload" @click="openAlbum">
            <i
              class="van-icon van-icon-photograph van-uploader__upload-icon"
            ></i>
          </div>
        </van-uploader>
      </div>

      <div @click="UpdateOrder" class="button">提交</div>
    </div>
  </van-popup>
</template>
<script>
import HeadTop from "@/components/head";
import goodsContent from "./goods-content";
import { Popup, Field, Uploader, Dialog, Toast } from "vant";
import { updateOrder } from "@/api/myOrderManagement";
import { formatFront, formatAfter } from "@/utils/formatPrice";
import { openAlbum } from "@/utils/APPempower";
import { GetAppImages } from "@/utils/AppImages";
export default {
  components: {
    [Popup.name]: Popup,
    [Field.name]: Field,
    [Uploader.name]: Uploader,
    HeadTop,
    goodsContent,
  },
  data() {
    return {
      open: false,
      item: this.$route.query,
      descImages: [],
      formData: {
        desc: "",
      },
    };
  },
  filters: {
    formatFront(text) {
      return formatFront(text);
    },
    formatAfter(text) {
      return formatAfter(text);
    },
  },
  created() {
    console.log(this.$route.query);
  },
  async mounted() {
    //安卓获取相册回调方法
    window["getAppImages"] = (list) => {
      var data = list.split("#");
      const toast = Toast.loading({
        duration: 0,
        forbidClick: true,
        message: "图片上传中...",
      });
      GetAppImages(data).then((res) => {
        Toast.clear();
        this.descImages = this.descImages.concat(res);
      });
    };
  },
  methods: {
    openAlbum() {
      //详情页
      var leng = 6 - this.descImages.length;
      openAlbum(leng);
    },
    UpdateOrder() {
      Dialog.confirm({
        title: "是否确定退款",
      })
        .then(() => {
          const toast = Toast.loading({
            duration: 0,
            forbidClick: true,
            message: "退款中...",
          });
          const data = {
            orderNo: this.$route.query.orderNo,
            statusId: "3",
            No_RSA: true,
            desc: JSON.stringify({
              desc: this.formData.desc,
              imgList: this.descImages.map((item) => {
                if (!item.status) return item.url;
              }),
            }),
          };
          updateOrder(data).then((res) => {
            if (res.data.resultStatus) {
              Toast.success(res.data.errorMessage);
            } else {
              Toast.fail(res.data.errorMessage);
            }
            const timer = setInterval(() => {
              clearInterval(timer);
              Toast.clear();
              if (res.data.resultStatus) {
                this.open = false;
                this.$onBackPressed();
              }
            }, 1000);
          });
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>
<style lang="less" scoped>
.content-wrap {
  padding-top: 16px;
  .total-content {
    margin-top: 10px;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    padding: 18px 10px;
    .total {
      display: flex;
      align-items: center;
      .label {
        width: 75px;
        height: 14px;
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        line-height: 14px;
      }
      .price {
        flex: 1;
        height: 18px;
        font-size: 18px;
        font-weight: bold;
        color: #f34a38;
        line-height: 18px;
        .decimal {
          height: 14px;
          font-size: 14px;
          line-height: 14px;
        }
        .company {
          margin-left: 2px;
          font-size: 14px;
          font-weight: 400;
          color: #333333;
          line-height: 14px;
        }
      }
    }
    .desc {
      margin-top: 7px;
      height: 11px;
      font-size: 11px;
      font-weight: 400;
      color: #999999;
      line-height: 11px;
    }
  }
  .desc-cotnent {
    margin-top: 10px;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    padding: 18px 10px;
    .label {
      font-size: 14px;
      font-weight: 400;
      color: #333333;
      line-height: 14px;
    }
    .van-cell {
      margin-top: 8px;
      padding: 0;
      font-size: 12px;
      font-weight: 400;
      color: #cccccc;
      line-height: 20px;
      &:after {
        display: none;
      }
    }
  }
  /deep/.van-uploader__upload {
    position: relative;
    z-index: 99;
  }
  .button {
    width: 308px;
    margin: 60px auto 0 auto;
    height: 46px;
    line-height: 46px;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    background: #333333;
    border-radius: 2px;
  }
}
</style>